നാവിഗേഷൻ എപിഐയിൽ പ്രാവീണ്യം നേടാം: സിംഗിൾ പേജ് ആപ്ലിക്കേഷൻ റൂട്ടിംഗും ഹിസ്റ്ററി മാനേജ്‌മെന്റും

സിംഗിൾ പേജ് ആപ്ലിക്കേഷനുകളിൽ (SPAs) റൂട്ടിംഗും ഹിസ്റ്ററി മാനേജ്‌മെന്റും കൈകാര്യം ചെയ്യുന്ന രീതിയിൽ ഒരു സുപ്രധാന മുന്നേറ്റമാണ് നാവിഗേഷൻ എപിഐ. പരമ്പരാഗത രീതികൾ പലപ്പോഴും `window.location` ഒബ്‌ജക്റ്റ് ഉപയോഗിക്കുകയോ അല്ലെങ്കിൽ തേർഡ്-പാർട്ടി ലൈബ്രറികളെ ആശ്രയിക്കുകയോ ആണ് ചെയ്യുന്നത്. ഈ രീതികൾ നമുക്ക് പ്രയോജനപ്പെട്ടിട്ടുണ്ടെങ്കിലും, നാവിഗേഷൻ എപിഐ കൂടുതൽ ലളിതവും മികച്ച പ്രകടനവുമുള്ളതും കൂടുതൽ ഫീച്ചറുകൾ നിറഞ്ഞതുമായ ഒരു പരിഹാരം നൽകുന്നു. ഇത് ഡെവലപ്പർമാർക്ക് ഉപയോക്താവിന്റെ നാവിഗേഷൻ അനുഭവത്തിൽ കൂടുതൽ നിയന്ത്രണം നൽകുന്നു.

എന്താണ് നാവിഗേഷൻ എപിഐ?

SPAs-ൽ നാവിഗേഷൻ, റൂട്ടിംഗ്, ഹിസ്റ്ററി എന്നിവ കൈകാര്യം ചെയ്യുന്നത് ലളിതമാക്കാനും മെച്ചപ്പെടുത്താനും രൂപകൽപ്പന ചെയ്ത ഒരു ആധുനിക ബ്രൗസർ എപിഐ ആണ് നാവിഗേഷൻ എപിഐ. ഇത് ഒരു പുതിയ `navigation` ഒബ്ജക്റ്റ് അവതരിപ്പിക്കുന്നു. നാവിഗേഷൻ ഇവന്റുകളെ തടസ്സപ്പെടുത്താനും നിയന്ത്രിക്കാനും, URL അപ്ഡേറ്റ് ചെയ്യാനും, പേജ് മുഴുവനായി റീലോഡ് ചെയ്യാതെ തന്നെ സ്ഥിരമായ ബ്രൗസിംഗ് ഹിസ്റ്ററി നിലനിർത്താനും ഇത് ഡെവലപ്പർമാരെ സഹായിക്കുന്നു. ഇത് വേഗതയേറിയതും സുഗമവും കൂടുതൽ പ്രതികരണശേഷിയുള്ളതുമായ ഉപയോക്തൃ അനുഭവത്തിന് കാരണമാകുന്നു.

നാവിഗേഷൻ എപിഐ ഉപയോഗിക്കുന്നതിന്റെ പ്രയോജനങ്ങൾ

• മെച്ചപ്പെട്ട പ്രകടനം: മുഴുവൻ പേജ് റീലോഡുകൾ ഒഴിവാക്കുന്നതിലൂടെ, നാവിഗേഷൻ എപിഐ SPAs-ന്റെ പ്രകടനം ഗണ്യമായി മെച്ചപ്പെടുത്തുന്നു. വ്യത്യസ്ത വ്യൂകൾക്കിടയിലുള്ള മാറ്റങ്ങൾ വേഗത്തിലും സുഗമമായും മാറുന്നു, ഇത് കൂടുതൽ ആകർഷകമായ ഉപയോക്തൃ അനുഭവത്തിലേക്ക് നയിക്കുന്നു.
• മെച്ചപ്പെട്ട നിയന്ത്രണം: നാവിഗേഷൻ ഇവന്റുകളിൽ പൂർണ്ണ നിയന്ത്രണം ഈ എപിഐ നൽകുന്നു, ഇത് ഡെവലപ്പർമാർക്ക് ആവശ്യമനുസരിച്ച് നാവിഗേഷൻ സ്വഭാവം മാറ്റാൻ അനുവദിക്കുന്നു. ഇതിൽ നാവിഗേഷൻ തടയുക, ഉപയോക്താക്കളെ റീഡയറക്ട് ചെയ്യുക, നാവിഗേഷന് മുമ്പോ ശേഷമോ കസ്റ്റം ലോജിക് പ്രവർത്തിപ്പിക്കുക എന്നിവ ഉൾപ്പെടുന്നു.
• ലളിതമായ ഹിസ്റ്ററി മാനേജ്മെന്റ്: ബ്രൗസറിന്റെ ഹിസ്റ്ററി സ്റ്റാക്ക് കൈകാര്യം ചെയ്യുന്നത് നാവിഗേഷൻ എപിഐ ഉപയോഗിച്ച് എളുപ്പമാക്കുന്നു. ഡെവലപ്പർമാർക്ക് പ്രോഗ്രാം ഉപയോഗിച്ച് ഹിസ്റ്ററി എൻട്രികൾ ചേർക്കാനും, മാറ്റാനും, അവയിലൂടെ സഞ്ചരിക്കാനും കഴിയും, ഇത് സ്ഥിരവും പ്രവചിക്കാവുന്നതുമായ ബ്രൗസിംഗ് അനുഭവം ഉറപ്പാക്കുന്നു.
• ഡിക്ലറേറ്റീവ് നാവിഗേഷൻ: നാവിഗേഷൻ എപിഐ റൂട്ടിംഗിന് കൂടുതൽ ഡിക്ലറേറ്റീവ് സമീപനം പ്രോത്സാഹിപ്പിക്കുന്നു, ഇത് ഡെവലപ്പർമാർക്ക് നാവിഗേഷൻ നിയമങ്ങളും സ്വഭാവങ്ങളും വ്യക്തവും സംക്ഷിപ്തവുമായ രീതിയിൽ നിർവചിക്കാൻ അനുവദിക്കുന്നു. ഇത് കോഡിന്റെ വായനാക്ഷമതയും പരിപാലനവും മെച്ചപ്പെടുത്തുന്നു.
• ആധുനിക ഫ്രെയിംവർക്കുകളുമായുള്ള സംയോജനം: റിയാക്റ്റ്, ആംഗുലർ, വ്യൂ.ജെഎസ് പോലുള്ള ആധുനിക ജാവാസ്ക്രിപ്റ്റ് ഫ്രെയിംവർക്കുകളുമായും ലൈബ്രറികളുമായും തടസ്സങ്ങളില്ലാതെ സംയോജിപ്പിക്കാൻ കഴിയുന്ന രീതിയിലാണ് നാവിഗേഷൻ എപിഐ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്. ഇത് ഡെവലപ്പർമാർക്ക് അവരുടെ നിലവിലുള്ള ഡെവലപ്‌മെന്റ് വർക്ക്ഫ്ലോകളിൽ എപിഐയുടെ സവിശേഷതകൾ പ്രയോജനപ്പെടുത്താൻ അനുവദിക്കുന്നു.

പ്രധാന ആശയങ്ങളും സവിശേഷതകളും

1. `navigation` ഒബ്ജക്റ്റ്

നാവിഗേഷൻ എപിഐയുടെ ഹൃദയം `navigation` ഒബ്ജക്റ്റാണ്, ഇത് ഗ്ലോബൽ `window` ഒബ്ജക്റ്റ് വഴി ആക്‌സസ് ചെയ്യാൻ കഴിയും (ഉദാഹരണത്തിന്, `window.navigation`). നാവിഗേഷനുമായി ബന്ധപ്പെട്ട വിവിധ പ്രോപ്പർട്ടികളിലേക്കും മെത്തേഡുകളിലേക്കും ഈ ഒബ്ജക്റ്റ് പ്രവേശനം നൽകുന്നു, അവയിൽ ചിലത് താഴെ പറയുന്നവയാണ്:

• `currentEntry`: നാവിഗേഷൻ ഹിസ്റ്ററിയിലെ നിലവിലെ എൻട്രിയെ പ്രതിനിധീകരിക്കുന്ന ഒരു `NavigationHistoryEntry` ഒബ്ജക്റ്റ് നൽകുന്നു.
• `entries()`: നാവിഗേഷൻ ഹിസ്റ്ററിയിലെ എല്ലാ എൻട്രികളെയും പ്രതിനിധീകരിക്കുന്ന `NavigationHistoryEntry` ഒബ്ജക്ടുകളുടെ ഒരു അറേ നൽകുന്നു.
• `navigate(url, { state, info, replace })`: ഒരു പുതിയ URL-ലേക്ക് നാവിഗേറ്റ് ചെയ്യുന്നു.
• `back()`: മുമ്പത്തെ ഹിസ്റ്ററി എൻട്രിയിലേക്ക് തിരികെ പോകുന്നു.
• `forward()`: അടുത്ത ഹിസ്റ്ററി എൻട്രിയിലേക്ക് മുന്നോട്ട് പോകുന്നു.
• `reload()`: നിലവിലെ പേജ് റീലോഡ് ചെയ്യുന്നു.
• `addEventListener(event, listener)`: നാവിഗേഷനുമായി ബന്ധപ്പെട്ട ഇവന്റുകൾക്കായി ഒരു ഇവന്റ് ലിസണർ ചേർക്കുന്നു.

2. `NavigationHistoryEntry`

`NavigationHistoryEntry` ഇന്റർഫേസ് നാവിഗേഷൻ ഹിസ്റ്ററിയിലെ ഒരൊറ്റ എൻട്രിയെ പ്രതിനിധീകരിക്കുന്നു. ഇത് എൻട്രിയെക്കുറിച്ചുള്ള വിവരങ്ങൾ നൽകുന്നു, ഉദാഹരണത്തിന് അതിന്റെ URL, സ്റ്റേറ്റ്, തനതായ ഐഡി എന്നിവ.

• `url`: ഹിസ്റ്ററി എൻട്രിയുടെ URL.
• `key`: ഹിസ്റ്ററി എൻട്രിക്കുള്ള ഒരു തനതായ ഐഡന്റിഫയർ.
• `id`: മറ്റൊരു തനതായ ഐഡന്റിഫയർ, ഒരു നാവിഗേഷൻ ഇവന്റിന്റെ ലൈഫ് സൈക്കിൾ ട്രാക്ക് ചെയ്യാൻ ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.
• `sameDocument`: നാവിഗേഷൻ ഒരേ ഡോക്യുമെന്റിൽ തന്നെയുള്ള നാവിഗേഷനിലാണോ കലാശിക്കുന്നത് എന്ന് സൂചിപ്പിക്കുന്ന ഒരു ബൂളിയൻ.
• `getState()`: ഹിസ്റ്ററി എൻട്രിയുമായി ബന്ധപ്പെട്ട സ്റ്റേറ്റ് നൽകുന്നു (നാവിഗേഷൻ സമയത്ത് സജ്ജീകരിച്ചത്).

3. നാവിഗേഷൻ ഇവന്റുകൾ

നാവിഗേഷൻ സ്വഭാവം നിരീക്ഷിക്കാനും നിയന്ത്രിക്കാനും ഡെവലപ്പർമാരെ അനുവദിക്കുന്ന നിരവധി ഇവന്റുകൾ നാവിഗേഷൻ എപിഐ ഡിസ്‌പാച്ച് ചെയ്യുന്നു. ഈ ഇവന്റുകളിൽ ഉൾപ്പെടുന്നവ:

• `navigate`: ഒരു നാവിഗേഷൻ ആരംഭിക്കുമ്പോൾ (ഉദാ. ഒരു ലിങ്കിൽ ക്ലിക്കുചെയ്യുമ്പോൾ, ഒരു ഫോം സമർപ്പിക്കുമ്പോൾ, അല്ലെങ്കിൽ `navigation.navigate()` വിളിക്കുമ്പോൾ) ഡിസ്‌പാച്ച് ചെയ്യുന്നു. നാവിഗേഷൻ അഭ്യർത്ഥനകളെ തടസ്സപ്പെടുത്താനും കൈകാര്യം ചെയ്യാനുമുള്ള പ്രാഥമിക ഇവന്റാണിത്.
• `navigatesuccess`: ഒരു നാവിഗേഷൻ വിജയകരമായി പൂർത്തിയാകുമ്പോൾ ഡിസ്‌പാച്ച് ചെയ്യുന്നു.
• `navigateerror`: ഒരു നാവിഗേഷൻ പരാജയപ്പെടുമ്പോൾ (ഉദാ. നെറ്റ്‌വർക്ക് പിശക് അല്ലെങ്കിൽ കൈകാര്യം ചെയ്യാത്ത എക്സെപ്ഷൻ കാരണം) ഡിസ്‌പാച്ച് ചെയ്യുന്നു.
• `currentchange`: നിലവിലെ ഹിസ്റ്ററി എൻട്രി മാറുമ്പോൾ (ഉദാ. മുന്നോട്ടോ പിന്നോട്ടോ നാവിഗേറ്റ് ചെയ്യുമ്പോൾ) ഡിസ്‌പാച്ച് ചെയ്യുന്നു.
• `dispose`: ഒരു `NavigationHistoryEntry` ഇനി ലഭ്യമാകാതെ വരുമ്പോൾ, ഉദാഹരണത്തിന് ഒരു `replaceState` പ്രവർത്തനത്തിനിടയിൽ അത് ഹിസ്റ്ററിയിൽ നിന്ന് നീക്കം ചെയ്യപ്പെടുമ്പോൾ, ഡിസ്‌പാച്ച് ചെയ്യപ്പെടുന്നു.

നാവിഗേഷൻ എപിഐ ഉപയോഗിച്ച് റൂട്ടിംഗ് നടപ്പിലാക്കൽ: ഒരു പ്രായോഗിക ഉദാഹരണം

ഒരു ലളിതമായ SPA-യിൽ അടിസ്ഥാന റൂട്ടിംഗ് നടപ്പിലാക്കാൻ നാവിഗേഷൻ എപിഐ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് നോക്കാം. ഹോം, എബൗട്ട്, കോൺടാക്റ്റ് എന്നിങ്ങനെ മൂന്ന് വ്യൂകളുള്ള ഒരു ആപ്ലിക്കേഷൻ പരിഗണിക്കുക.

ആദ്യം, റൂട്ട് മാറ്റങ്ങൾ കൈകാര്യം ചെയ്യാൻ ഒരു ഫംഗ്ഷൻ ഉണ്ടാക്കുക:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Home
Welcome to the Home page!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
About
Learn more about us.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Contact
Get in touch with us.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Not Found
Page not found.
';
  }
}

അടുത്തതായി, `navigate` ഇവന്റിലേക്ക് ഒരു ഇവന്റ് ലിസണർ ചേർക്കുക:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // Prevent default browser navigation

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // Resolve the promise after route handling
  });

  event.transition = promise;
});

ഈ കോഡ് `navigate` ഇവന്റിനെ തടസ്സപ്പെടുത്തുകയും, `event.destination` ഒബ്ജക്റ്റിൽ നിന്ന് URL എക്‌സ്‌ട്രാക്റ്റുചെയ്യുകയും, ഡിഫോൾട്ട് ബ്രൗസർ നാവിഗേഷൻ തടയുകയും, ഉള്ളടക്കം അപ്‌ഡേറ്റ് ചെയ്യുന്നതിനായി `handleRouteChange`-നെ വിളിക്കുകയും, `event.transition` പ്രോമിസ് സജ്ജമാക്കുകയും ചെയ്യുന്നു. `event.transition` സജ്ജീകരിക്കുന്നത്, പേജ് ദൃശ്യപരമായി അപ്‌ഡേറ്റ് ചെയ്യുന്നതിന് മുമ്പ് ഉള്ളടക്ക അപ്‌ഡേറ്റ് പൂർത്തിയാകുന്നതുവരെ ബ്രൗസർ കാത്തിരിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

അവസാനമായി, നാവിഗേഷൻ ട്രിഗർ ചെയ്യുന്ന ലിങ്കുകൾ നിങ്ങൾക്ക് ഉണ്ടാക്കാം:

Home | About | Contact

ആ ലിങ്കുകളിലേക്ക് ഒരു ക്ലിക്ക് ലിസണർ ചേർക്കുക:

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A' && event.target.hasAttribute('data-navigo')) {
    event.preventDefault();
    window.navigation.navigate(event.target.href);
  }
});

ഇത് നാവിഗേഷൻ എപിഐ ഉപയോഗിച്ച് അടിസ്ഥാന ക്ലയന്റ്-സൈഡ് റൂട്ടിംഗ് സജ്ജമാക്കുന്നു. ഇപ്പോൾ, ലിങ്കുകളിൽ ക്ലിക്കുചെയ്യുന്നത് ഒരു നാവിഗേഷൻ ഇവന്റ് ട്രിഗർ ചെയ്യും, അത് പേജ് മുഴുവനായി റീലോഡ് ചെയ്യാതെ തന്നെ `content` ഡൈവിന്റെ ഉള്ളടക്കം അപ്‌ഡേറ്റ് ചെയ്യും.

സ്റ്റേറ്റ് മാനേജ്മെന്റ് ചേർക്കുന്നു

ഓരോ ഹിസ്റ്ററി എൻട്രിയുമായും ഒരു സ്റ്റേറ്റ് ബന്ധപ്പെടുത്താൻ നാവിഗേഷൻ എപിഐ നിങ്ങളെ അനുവദിക്കുന്നു. നാവിഗേഷൻ ഇവന്റുകളിലുടനീളം ഡാറ്റ സംരക്ഷിക്കാൻ ഇത് ഉപയോഗപ്രദമാണ്. ഒരു സ്റ്റേറ്റ് ഒബ്ജക്റ്റ് ഉൾപ്പെടുത്തുന്നതിനായി നമുക്ക് മുൻപത്തെ ഉദാഹരണം പരിഷ്കരിക്കാം.

`navigation.navigate()` വിളിക്കുമ്പോൾ, നിങ്ങൾക്ക് ഒരു `state` ഒബ്ജക്റ്റ് പാസ്സ് ചെയ്യാൻ കഴിയും:

window.navigation.navigate('/about', { state: { pageTitle: 'About Us' } });

`navigate` ഇവന്റ് ലിസണറിനുള്ളിൽ, `event.destination.getState()` ഉപയോഗിച്ച് നിങ്ങൾക്ക് സ്റ്റേറ്റ് ആക്സസ് ചെയ്യാൻ കഴിയും:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  const state = event.destination.getState();
  event.preventDefault();

  const promise = new Promise((resolve) => {
      handleRouteChange(url, state);
      resolve();
  });
  event.transition = promise;

});

function handleRouteChange(url, state = {}) {
  const contentDiv = document.getElementById('content');
  let title = state.pageTitle || 'My App'; // Default title

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Home
Welcome to the Home page!
';
      title = 'Home';
      break;
    case '/about':
      contentDiv.innerHTML = '
About
Learn more about us.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Contact
Get in touch with us.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Not Found
Page not found.
';
      title = '404 Not Found';
  }
  document.title = title;
}

ഈ പരിഷ്കരിച്ച ഉദാഹരണത്തിൽ, `handleRouteChange` ഫംഗ്ഷൻ ഇപ്പോൾ ഒരു `state` പാരാമീറ്റർ സ്വീകരിക്കുകയും ഡോക്യുമെന്റിന്റെ ടൈറ്റിൽ അപ്‌ഡേറ്റ് ചെയ്യാൻ അത് ഉപയോഗിക്കുകയും ചെയ്യുന്നു. സ്റ്റേറ്റ് ഒന്നും പാസ്സ് ചെയ്തില്ലെങ്കിൽ, അത് 'My App' എന്ന ഡിഫോൾട്ട് മൂല്യം എടുക്കും.

`navigation.updateCurrentEntry()` ഉപയോഗിക്കുന്നു

ചിലപ്പോൾ ഒരു പുതിയ നാവിഗേഷൻ ട്രിഗർ ചെയ്യാതെ തന്നെ നിലവിലെ ഹിസ്റ്ററി എൻട്രിയുടെ സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം. `navigation.updateCurrentEntry()` മെത്തേഡ് ഇത് ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഉദാഹരണത്തിന്, ഒരു ഉപയോക്താവ് നിലവിലെ പേജിലെ ഒരു സെറ്റിംഗ് മാറ്റുകയാണെങ്കിൽ, ആ മാറ്റം പ്രതിഫലിപ്പിക്കുന്നതിന് നിങ്ങൾക്ക് സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യാം:

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('Updated setting:', setting, 'to', value);
}

// Example usage:
updateUserSetting('theme', 'dark');

ഈ ഫംഗ്ഷൻ നിലവിലെ സ്റ്റേറ്റ് എടുക്കുകയും, അപ്‌ഡേറ്റ് ചെയ്ത സെറ്റിംഗ് അതിൽ ലയിപ്പിക്കുകയും, തുടർന്ന് പുതിയ സ്റ്റേറ്റ് ഉപയോഗിച്ച് നിലവിലെ ഹിസ്റ്ററി എൻട്രി അപ്‌ഡേറ്റ് ചെയ്യുകയും ചെയ്യുന്നു.

അഡ്വാൻസ്ഡ് ഉപയോഗങ്ങളും പരിഗണനകളും

1. ഫോം സമർപ്പിക്കലുകൾ കൈകാര്യം ചെയ്യുന്നു

SPAs-ൽ ഫോം സമർപ്പിക്കലുകൾ കൈകാര്യം ചെയ്യാനും, മുഴുവൻ പേജ് റീലോഡുകൾ തടയാനും, കൂടുതൽ സുഗമമായ ഉപയോക്തൃ അനുഭവം നൽകാനും നാവിഗേഷൻ എപിഐ ഉപയോഗിക്കാം. നിങ്ങൾക്ക് ഫോം സമർപ്പിക്കൽ ഇവന്റ് തടസ്സപ്പെടുത്താനും `navigation.navigate()` ഉപയോഗിച്ച് URL അപ്‌ഡേറ്റ് ചെയ്യാനും മുഴുവൻ പേജ് റീലോഡ് ഇല്ലാതെ ഫലങ്ങൾ പ്രദർശിപ്പിക്കാനും കഴിയും.

2. അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ

നാവിഗേഷൻ ഇവന്റുകൾ കൈകാര്യം ചെയ്യുമ്പോൾ, ഒരു എപിഐയിൽ നിന്ന് ഡാറ്റ ലഭ്യമാക്കുന്നത് പോലുള്ള അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ നടത്തേണ്ടി വന്നേക്കാം. `event.transition` പ്രോപ്പർട്ടി നാവിഗേഷൻ ഇവന്റുമായി ഒരു പ്രോമിസ് ബന്ധപ്പെടുത്താൻ നിങ്ങളെ അനുവദിക്കുന്നു, ഇത് പേജ് അപ്‌ഡേറ്റ് ചെയ്യുന്നതിന് മുമ്പ് അസിൻക്രണസ് പ്രവർത്തനം പൂർത്തിയാകുന്നതുവരെ ബ്രൗസർ കാത്തിരിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു. മുകളിലുള്ള ഉദാഹരണങ്ങൾ കാണുക.

3. സ്ക്രോൾ പുനഃസ്ഥാപിക്കൽ

ഒരു നല്ല ഉപയോക്തൃ അനുഭവം നൽകുന്നതിന് നാവിഗേഷൻ സമയത്ത് സ്ക്രോൾ പൊസിഷൻ നിലനിർത്തുന്നത് നിർണായകമാണ്. ഹിസ്റ്ററിയിൽ പിന്നോട്ടോ മുന്നോട്ടോ പോകുമ്പോൾ സ്ക്രോൾ പൊസിഷൻ പുനഃസ്ഥാപിക്കുന്നതിനുള്ള സംവിധാനങ്ങൾ നാവിഗേഷൻ എപിഐ നൽകുന്നു. സ്ക്രോൾ പൊസിഷൻ സംഭരിക്കാനും പുനഃസ്ഥാപിക്കാനും നിങ്ങൾക്ക് `NavigationHistoryEntry`-യുടെ `scroll` പ്രോപ്പർട്ടി ഉപയോഗിക്കാം.

4. പിശകുകൾ കൈകാര്യം ചെയ്യൽ

നെറ്റ്‌വർക്ക് പിശകുകൾ അല്ലെങ്കിൽ കൈകാര്യം ചെയ്യാത്ത എക്സെപ്ഷനുകൾ പോലുള്ള നാവിഗേഷൻ സമയത്ത് സംഭവിക്കാവുന്ന പിശകുകൾ കൈകാര്യം ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്. ഈ പിശകുകളെ ഭംഗിയായി പിടിച്ചെടുക്കാനും കൈകാര്യം ചെയ്യാനും `navigateerror` ഇവന്റ് നിങ്ങളെ അനുവദിക്കുന്നു, ഇത് ആപ്ലിക്കേഷൻ ക്രാഷ് ആകുന്നതോ ഉപയോക്താവിന് ഒരു പിശക് സന്ദേശം കാണിക്കുന്നതോ തടയുന്നു.

5. പ്രോഗ്രസ്സീവ് എൻഹാൻസ്‌മെന്റ്

നാവിഗേഷൻ എപിഐ ഉപയോഗിച്ച് SPAs നിർമ്മിക്കുമ്പോൾ, പ്രോഗ്രസ്സീവ് എൻഹാൻസ്‌മെന്റ് പരിഗണിക്കേണ്ടത് പ്രധാനമാണ്. ബ്രൗസർ നാവിഗേഷൻ എപിഐയെ പിന്തുണയ്ക്കുന്നില്ലെങ്കിൽ പോലും നിങ്ങളുടെ ആപ്ലിക്കേഷൻ ശരിയായി പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കുക. `navigation` ഒബ്ജക്റ്റിന്റെ സാന്നിധ്യം പരിശോധിക്കാൻ നിങ്ങൾക്ക് ഫീച്ചർ ഡിറ്റക്ഷൻ ഉപയോഗിക്കാം, ആവശ്യമെങ്കിൽ പരമ്പരാഗത റൂട്ടിംഗ് രീതികളിലേക്ക് മടങ്ങാം.

പരമ്പരാഗത റൂട്ടിംഗ് രീതികളുമായുള്ള താരതമ്യം

SPAs-ലെ പരമ്പരാഗത റൂട്ടിംഗ് രീതികൾ പലപ്പോഴും `window.location` ഒബ്ജക്റ്റ് ഉപയോഗിക്കുകയോ അല്ലെങ്കിൽ `react-router` അല്ലെങ്കിൽ `vue-router` പോലുള്ള തേർഡ്-പാർട്ടി ലൈബ്രറികളെ ആശ്രയിക്കുകയോ ആണ് ചെയ്യുന്നത്. ഈ രീതികൾ വ്യാപകമായി ഉപയോഗിക്കപ്പെടുന്നതും നല്ലപോലെ സ്ഥാപിതവുമാണെങ്കിലും, അവയ്ക്ക് ചില പരിമിതികളുണ്ട്:

• മുഴുവൻ പേജ് റീലോഡുകൾ: `window.location` നേരിട്ട് മാറ്റുന്നത് മുഴുവൻ പേജ് റീലോഡുകൾക്ക് കാരണമായേക്കാം, ഇത് വേഗത കുറഞ്ഞതും ഉപയോക്തൃ അനുഭവത്തെ തടസ്സപ്പെടുത്തുന്നതുമാണ്.
• സങ്കീർണ്ണത: പരമ്പരാഗത രീതികൾ ഉപയോഗിച്ച് ഹിസ്റ്ററിയും സ്റ്റേറ്റും കൈകാര്യം ചെയ്യുന്നത് സങ്കീർണ്ണവും പിശകുകൾക്ക് സാധ്യതയുള്ളതുമാണ്, പ്രത്യേകിച്ചും വലുതും സങ്കീർണ്ണവുമായ ആപ്ലിക്കേഷനുകളിൽ.
• പ്രകടനത്തിലെ ഓവർഹെഡ്: തേർഡ്-പാർട്ടി റൂട്ടിംഗ് ലൈബ്രറികൾ പ്രകടനത്തിൽ കാര്യമായ ഓവർഹെഡ് ചേർത്തേക്കാം, പ്രത്യേകിച്ചും നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ നിർദ്ദിഷ്ട ആവശ്യങ്ങൾക്കായി അവ ഒപ്റ്റിമൈസ് ചെയ്തിട്ടില്ലെങ്കിൽ.

റൂട്ടിംഗിനും ഹിസ്റ്ററി മാനേജ്‌മെന്റിനും കൂടുതൽ ലളിതവും മികച്ച പ്രകടനവുമുള്ളതും ഫീച്ചറുകൾ നിറഞ്ഞതുമായ ഒരു പരിഹാരം നൽകിക്കൊണ്ട് നാവിഗേഷൻ എപിഐ ഈ പരിമിതികളെ അഭിസംബോധന ചെയ്യുന്നു. ഇത് മുഴുവൻ പേജ് റീലോഡുകൾ ഒഴിവാക്കുന്നു, ഹിസ്റ്ററി മാനേജ്മെന്റ് ലളിതമാക്കുന്നു, കൂടാതെ നാവിഗേഷൻ ഇവന്റുകളിൽ പൂർണ്ണ നിയന്ത്രണം നൽകുന്നു.

ബ്രൗസർ അനുയോജ്യത

2024-ന്റെ അവസാനത്തോടെ, ക്രോം, ഫയർഫോക്സ്, സഫാരി, എഡ്ജ് എന്നിവയുൾപ്പെടെയുള്ള ആധുനിക ബ്രൗസറുകളിലുടനീളം നാവിഗേഷൻ എപിഐക്ക് നല്ല പിന്തുണയുണ്ട്. എന്നിരുന്നാലും, നിങ്ങളുടെ പ്രൊഡക്ഷൻ ആപ്ലിക്കേഷനുകളിൽ നാവിഗേഷൻ എപിഐ നടപ്പിലാക്കുന്നതിന് മുമ്പ് Can I use പോലുള്ള ഉറവിടങ്ങളിൽ ഏറ്റവും പുതിയ ബ്രൗസർ അനുയോജ്യത വിവരങ്ങൾ പരിശോധിക്കുന്നത് എല്ലായ്പ്പോഴും ഒരു നല്ല ശീലമാണ്. പഴയ ബ്രൗസർ പിന്തുണ നിർബന്ധമാണെങ്കിൽ, ഒരു പോളിഫിൽ അല്ലെങ്കിൽ ഒരു ഫാൾബാക്ക് മെക്കാനിസം ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.

ഉപസംഹാരം

അഡ്വാൻസ്ഡ് റൂട്ടിംഗും ഹിസ്റ്ററി മാനേജ്മെന്റ് കഴിവുകളുമുള്ള ആധുനികവും മികച്ച പ്രകടനവുമുള്ള SPAs നിർമ്മിക്കുന്നതിനുള്ള ശക്തമായ ഒരു ഉപകരണമാണ് നാവിഗേഷൻ എപിഐ. എപിഐയുടെ സവിശേഷതകൾ പ്രയോജനപ്പെടുത്തുന്നതിലൂടെ, ഡെവലപ്പർമാർക്ക് വേഗതയേറിയതും സുഗമവും കൂടുതൽ ആകർഷകവുമായ ഉപയോക്തൃ അനുഭവങ്ങൾ സൃഷ്ടിക്കാൻ കഴിയും. ലളിതവും പഴയതുമായ രീതികൾ ഉപയോഗിക്കുന്നതിനെ അപേക്ഷിച്ച് പ്രാരംഭ പഠനം അല്പം കുത്തനെയുള്ളതായിരിക്കാമെങ്കിലും, നാവിഗേഷൻ എപിഐയുടെ പ്രയോജനങ്ങൾ, പ്രത്യേകിച്ച് സങ്കീർണ്ണമായ ആപ്ലിക്കേഷനുകളിൽ, ഇതിനെ ഒരു മൂല്യവത്തായ നിക്ഷേപമാക്കി മാറ്റുന്നു. നാവിഗേഷൻ എപിഐ സ്വീകരിക്കുക, നിങ്ങളുടെ SPAs-ന്റെ മുഴുവൻ സാധ്യതകളും പ്രയോജനപ്പെടുത്തുക.

കൂടുതൽ പഠനത്തിന്

• MDN വെബ് ഡോക്സ്: നാവിഗേഷൻ എപിഐ
• WICG നാവിഗേഷൻ എപിഐ സ്പെസിഫിക്കേഷൻ